<template>
  <div class="pageContent">
    <div class="htmlContent">
      <!-- 表单 -->
      <div class="htmlForm">
        <div
          style="
            font-weight: bold;
            text-align: center;
            width: 100%;
            font-size: 22px;
          "
        >
          采购单
        </div>
        <div style="display: flex">
          <span style="margin-left: auto; margin-right: 7vw; padding: 10px 0"
            >2025-01-24</span
          >
        </div>
        <div
          style="
            width: 80%;
            border-top: 1px solid black;
            border-left: 1px solid black;
            border-right: 1px solid black;
            margin: 0 auto;
          "
        >
          <div
            v-for="(item, index) in listFormat"
            :key="index"
            style="display: flex; width: 100%; border-bottom: 1px solid black"
          >
            <div
              v-for="(el, ind) in item"
              :key="ind"
              :style="
                ind == 0
                  ? 'width:30%;border-right: 1px solid black;padding:20px 0;display: flex;justify-content: center;align-items: center;'
                  : 'width:60%;overflow-wrap: anywhere;padding:20px 0;display: flex;justify-content: center;align-items: center;margin:0 auto;'
              "
            >
              <div v-if="ind == 1">
                <!-- 0,1表示填报人 -->
                <div
                  v-if="index == 0"
                  style="display: flex; justify-content: center"
                >
                  <div>{{ form.author }}</div>
                </div>
                <!-- 日期 -->
                <div v-else-if="index == 1">
                  <div>{{ form.buyDate }}</div>
                </div>
                <!-- 价格 -->
                <div v-else-if="index == 2">
                  <div>{{ form.buyPrice }}</div>
                </div>
                <!-- 标题 -->
                <div v-else-if="index == 3">
                  <div>{{ form.title }}</div>
                </div>
                <!-- 内容 -->
                <div v-else-if="index == 4">
                  <div>{{ form.content }}</div>
                </div>
              </div>
              <div v-else>
                {{ el }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="display: flex">
        <div style="margin-left: auto; margin-right: 7vw; margin-top: 1vw">
          <el-button
            type="primary"
            style="margin: left"
            size="small"
            @click="changeToPdf"
            >导出pdf</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import html2canvas from "html2canvas";
import { jsPDF } from "jspdf";
export default {
  data() {
    /* 自定义校验 */
    var checkTime = (rule, value, callback) => {
      console.log(value, "value");
      if (value == undefined || value == "" || value == null) {
        callback("请选择填报时间");
      } else {
        callback();
      }
    };
    return {
      listFormat: [
        ["填报人", ""],
        ["填报日期", ""],
        ["采购价格", ""],
        ["采购标题", ""],
        ["采购内容", ""],
      ], //列表格式
      form: {
        author: "",
        buyDate: "",
        buyPrice: "",
        title: "",
        content: "",
      },
      rules: {
        author: [{ required: true, message: "请输入填报人", trigger: "blur" }],
        buyPrice: [{ required: true, message: "请输入价格", trigger: "blur" }],
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
        buyDate: [{ validator: checkTime, trigger: "blur" }],
      },
    };
  },
  created() {
    this.form.author = this.$store.state.user.info.name;
    if (this.$route.query.id) {
      this.getData();
    }
  },
  methods: {
    getData() {
      let obj = {
        id: this.$route.query.id,
      };
      this.$http.post("/getPurchaseDetail", obj).then((res) => {
        if (res.code == 200) {
          this.form = Object.assign(this.form, res.data.data);
        }
      });
    },
    //导出pdf
    changeToPdf() {
      let target = document.querySelector(".htmlForm");
      html2canvas(target, { width: target.width, height: target.height }).then(
        function (canvas) {
          // //固定a4纸的高度宽度
          let contentwidth = canvas.width;
          let contentHeight = canvas.height;
          console.log(contentwidth, contentHeight);
          //一页pdf显示htm1页面生成的canvas高度;"
          let pageHeight = (contentwidth * 841.89) / 592.28;
          console.log(pageHeight, "pageHeight");
          //未生成pdf的htm1页面高度
          let leftHeight = contentHeight;
          // 页面偏移
          let position = 0;
          // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
          let imgwidth = 595.28;
          let imgHeight = (595.28 / contentwidth) * contentHeight;
          let pageData = canvas.toDataURL("image/jpeg", 1.0);
          let pdf = new jsPDF("", "pt", "a4");
          if (leftHeight < pageHeight) {
            pdf.addImage(pageData, "JPEG", 0, 0, imgwidth, imgHeight);
          } else {
            while (leftHeight > 0) {
              pdf.addImage(pageData, "JPEG", 0, position, imgwidth, imgHeight);
              leftHeight -= pageHeight;
              position -= 841.89;
              if (leftHeight > 0) {
                pdf.addPage();
              }
            }
          }
          pdf.save("test.pdf");
        }
      );
    },
  },
};
</script>
<style scoped>
@import url("../../../styles/pages.scss");
.htmlForm {
  padding: 30px 0 0 0;
}
</style>